<template>
  <div id="musicPlayer" @click.stop="show" :style="`height:${showHeight};overflow:${showOverflow}`">
    <!-- 隐藏的音乐播放器 -->
    <audio ref="audio" :src="currentSong.url" @timeupdate="onTimeUpdate" @ended="onEnded"></audio>
    <!-- 显示当前播放的歌曲信息 -->
    <div id="detailOfSong">歌曲：{{ currentSong.name }} - 歌手：{{ currentSong.artist }}</div>
    <!-- 显示播放器控制面板 -->
    <div id="controlsOfSong">
<!--      <button @click="prev">|《</button>-->
      <button v-if="isPlaying" @click.stop="pause">暂停</button>
      <button v-else @click.stop="play">播放</button>
<!--      <button @click="next">》|</button>-->
      <input type="range" v-model="volume" min="0" max="100" style="display:block;position: absolute;transform: rotateZ(-90deg);right: -60px;top:20px;width: 100px;height: 10px;">
      <div style="float: right">
        <div class="progress-bar">
          <div class="progress-bar__inner" :style="progressBarStyle"></div>
        </div>
        <!-- 显示当前播放时间和总时长 -->
        <div>{{ formattedCurrentTime }} / {{ formattedDuration }}</div>
      </div>
    </div>

    <div id="songs">
      <div v-for="(song,index) in songs" :key="index" @click.stop="selectSong(index)">
        {{song.name}}-----{{song.artist}}
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "musicPlayer",
  data(){
    return {
      showAll:false,
      showHeight:"10vh",
      showOverflow:"hidden",

      currentSongIndex: 0, // 当前播放的歌曲索引
      isPlaying: false, // 是否正在播放
      volume: 20, // 音量
      songs: [ // 歌曲列表
        { name: '天生我材', artist: '王华年', url: '/api/player/audio?name=天生我材-王华年.mp3' },
        { name: '歌曲2', artist: '歌手2', url: 'http://example.com/song2.mp3' },
        { name: '歌曲3', artist: '歌手3', url: 'http://example.com/song3.mp3' }
      ],


      currentTime: 0, // 当前播放时间（单位：秒）
      duration: 0, // 音乐总时长（单位：秒）
      progress: 0, // 播放进度（百分比）
      formattedCurrentTime: '0:00', // 格式化后的当前播放时间
      formattedDuration: '0:00' // 格式化后的音乐总时长
    }
  },
  watch:{
    volume:{
      deep:true,
      handler(newVal){
        this.volume = newVal
        this.$refs.audio.volume = this.volume/100
      }
    }
  },
  methods: {
    show(){
      this.showAll = !this.showAll
      this.showHeight = this.showAll?"60vh":"10vh"
      this.showOverflow = this.showAll?"none":"hidden"
    },
    play() {
      this.$refs.audio.volume = this.volume/100
      this.isPlaying = true
      // 播放音乐
      this.$refs.audio.play()
    },
    pause() {
      this.isPlaying = false
      // 暂停音乐
      this.$refs.audio.pause()
    },
    next() {
      this.currentSongIndex = (this.currentSongIndex + 1) % this.songs.length
      this.isPlaying = true
      // 切换到下一首歌曲
      this.$refs.audio.currentTime = 0
      this.$refs.audio.pause()
      this.$nextTick(() => {
        this.currentSongIndex = (this.currentSongIndex + 1) % this.songs.length
      })
    },
    prev() {
      this.currentSongIndex = (this.currentSongIndex - 1 + this.songs.length) % this.songs.length
      this.isPlaying = true
      // 切换到上一首歌曲
      this.$refs.audio.currentTime = 0
      this.$refs.audio.pause()
      this.$nextTick(() => {
        this.currentSongIndex = (this.currentSongIndex - 1 + this.songs.length) % this.songs.length
      })
    },
    formatTime(time) {
      // 格式化时间，将秒数转为 mm:ss 的形式
      if (time==null||time==undefined||time=="")time=0
      const minutes = Math.floor(time / 60)
      const seconds = Math.round(time % 60)
      return `${minutes}:${seconds < 10 ? '0' : ''}${seconds}`
    },
    onTimeUpdate(event) {
      // 当音乐播放器的播放位置发生变化时触发
      const { currentTime, duration } = event.target
      this.currentTime = currentTime
      this.duration = duration
      this.progress = (currentTime / duration) * 100
      this.formattedCurrentTime = this.formatTime(currentTime)
      this.formattedDuration = this.formatTime(duration)
    },
    onEnded() {
      // 当音乐播放结束时触发
      this.next()
    },
    selectSong(index){
      this.pause()
      this.currentSongIndex = index
      setTimeout(()=>{
        this.play()
      },1000)
    }
  },
  computed: {
    currentSong() {
      return this.songs[this.currentSongIndex]
    },
    progressBarStyle() {
      return {
        height:"1vh",
        backgroundColor:"#f5d858",
        width: `${this.progress}%`
      }
    }
  }
}
</script>

<style lang="less" scoped>
#musicPlayer{
  position: fixed;
  left: -18vw;
  z-index: 6;
  width: 20vw;
  height: 60vh;
  background-color: rgba(181, 54, 29, 0.9);
  border-radius: 4vh;
  transition: all ease-in-out 1s;
  &:hover{
    left: 0;
  }
  #detailOfSong{
    display: block;
    width: 100%;
    height: 4vh;
    text-align: center;
    line-height: 4vh;
  }
  #controlsOfSong{
    width: 100%;
    height: 6vh;
    line-height: 6vh;
    position: relative;
    button{
      display: block;
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      float: left;
      height: 30px;
      outline: none;
      border: none;
      width: 20%;
      border-radius: 15px;
    }
    div{
      width: 80%;
      height: 6vh;
      position: relative;
      //background-color: black;
      .progress-bar{
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        height: 1vh;
        border-radius: 3vh;
        width: 60%;
        float: left;
        background-color: white;
        .progress-bar__inner{
          float: left;
        }
      }
      div{
        float: right;
        width: 40%;
      }
    }
  }
  #songs{
    height: 40vh;
    overflow-y: auto;
    width: 100%;
    div{
      margin: 2vh 0;
      height: 4vh;
      line-height: 4vh;
      text-align: center;
      &:hover{
        background-color: #f5d858;
        cursor: pointer;
      }
    }
  }
}
</style>
